<template>
  <div>
    <template v-if="row.isCombination">
      <template v-if="editStatus">
        <el-input
          ref="goodsValueInput"
          :id="goodsForm.id + 'value'"
          v-model="goodsForm.value"
          @blur="editStatus = false;submitForm(row)"
          @input="limitInput($event)"
          maxlength="8"
        ></el-input>
      </template>
      <template v-else>
        <template v-if="row.combinationFee">
          {{row.combinationFee}}
          <i class="el-icon-edit mgl10" style="cursor: pointer" @click="editGoodsValue(row)"></i>
        </template>
      </template>
    </template>
    <template v-else>-</template>

  </div>


</template>
<script>
import i18n from "@/lang";
import {saveGoodsCombinationFee} from "@/api/stock";

export default {
  name: "CombinationFeeColumn",
  data(){
    return {
      goodsForm: {
        id: 0,
        value: 0,
      },
      editStatus: false, // 编辑状态
    }
  },
  props:{
    row: {
      type: Object,
    },
    showMessage: {
      type: Boolean,
      default: true,
    },
    id: {
      type: String,
      default: 'id',
    }
  },
  methods: {
    // 编辑货值
    editGoodsValue(row){
      this.goodsForm.id = row[this.id]
      this.goodsForm.value = row.combinationFee
      this.editStatus = true
      this.$nextTick(()=>{
        document.getElementById(row[this.id] + 'value').focus()
      })
    },
    // 提交修改货值
    submitForm(row){
      if(!this.goodsForm.value){
        return
      }
      this.goodsForm.value = Number(this.goodsForm.value)
      if(!this.goodsForm.value){
        return;
      }
      if(this.goodsForm.value === Number(row.combinationFee)){
        return;
      }
      row.combinationFee = this.goodsForm.value
      const data = {
        suitId: this.goodsForm.id,
        combinationFee: this.goodsForm.value,
      }
      saveGoodsCombinationFee(data)
        .then(res=>{
          if(this.showMessage){
            this.$successMessage(res.message)
          }
          this.$emit('successGoodsValue',data)
        })

    },
    //限制只能输入两位小数
    limitInput(value) {
      this.goodsForm.value = ('' + value) // 第一步：转成字符串
        .replace(/[^\d^.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
        .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
        .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
        .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，	而且小数点后面只能有0到2位小数
    },
  }
}
</script>

<style scoped lang="scss">

</style>
